import wangEditor from 'wangeditor'
import api from "@/constant/api";
import axios from '@/common/http'
const { BtnMenu } = wangEditor;
class AlertMenu extends BtnMenu {
    constructor(editor) {
        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        const $elem = wangEditor.$(
            `<div class="w-e-menu" data-title="附件上传">
                <i class="iconfont">&#xe684;</i>
                <input type="file" id="fileInput" style="position:absolute;left:0;width:40px;opacity:0;" "/>
            </div>`,
        );
        super($elem, editor);
    }
    clickHandler() {
        var editor = this.editor;
        let input = document.getElementById('fileInput');
        input.onchange= function () {
            // window.console.log("files")
            // window.console.log(this.files)
            // window.console.log("------------------")
            const _file = this.files[0];
            var formData = new FormData();
            formData.append("File", _file);
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            axios
            .post(api.api_TaskReport_UpdateFile, formData, config)
            .then(data => {
                if (data.Result.code) {
                    const aHref = '<a href="' + data.Result.url + '" class="color_link" target="_blank">'+data.Result.name+'</a>'
                    // 插入光标位置
                    editor.cmd.do('insertHTML',aHref)
                }
            })
            .catch(() => {});
        }
        // 以下方法数据会重复，多次上传重复的数据
        // input.removeEventListener('change', () => window.console.log('removeEventListener'));
        // input.addEventListener('change', function () {
        //     const _file = this.files[0];
        //     var formData = new FormData();
        //     formData.append("File", _file);
        //     let config = {
        //         headers: {
        //             "Content-Type": "multipart/form-data"
        //         }
        //     };
        //     // window.console.log("files")
        //     // window.console.log(this.files)
        //     // window.console.log("----------")
        //     // window.console.log("value",input.value)
        //     // input.value = null
        //     // axios
        //     // .post(api.api_TaskReport_UpdateFile, formData, config)
        //     // .then(data => {
        //     //     if (data.Result.code) {
        //     //         const aHref = '<a href="' + data.Result.url + '" class="color_link" target="_blank">'+data.Result.name+'</a>'
        //     //         // 插入光标位置
        //     //         editor.cmd.do('insertHTML',aHref)
        //     //     }
        //     // })
        //     // .catch(() => {});
        // })
    }
    tryChangeActive() {
        // this.active()
    }
}
export { AlertMenu };
